<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/reset.css}">
    <link rel="stylesheet" th:href="@{/css/iconfont/iconfont.css}">
    <link rel="stylesheet" th:href="@{/css/homework.css}">
    <div th:insert="commen/head :: header">
    </div>
</head>
<body  style="background-color: rgb(242,244,247)">
<div th:insert="commen/navigationBar :: topNavBar"></div>
    <div class="container-fluid" >
        <div class="row">
            <div class="col-md-2">
                <div th:insert="commen/navigationBar :: leafTeaNavBar"></div>
            </div>
            <div class="col-md-10 column" style="background-color: #ffffff; text-align: left;margin-top: 5px;}">
                <ul id="myTab" class="nav nav-tabs">
                    <li>
                        <a href="#homework" data-toggle="tab" style="margin-left: 10px;margin-right: 10px; font-size: 18px; font-weight: bold;">
                            作业
                        </a>
                    </li>
                    <li>
                        <a href="#questionsBank" data-toggle="tab" style="font-size: 18px; font-weight: bold;" >
                            题库
                        </a>
                    </li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade" id="homework">
                        <div class="col-md-12" style="margin-bottom: 20px;">
                            <div th:each="homework:${homeworks}" style="background-color: #ced9f8; margin-top: 10px; padding: 15px; height: 80px; border-radius: 10px">
                                <a href="" style="color: black; padding: 5px;">
                                    <div  style="float:left;">
                                        <span style="color: black; font-size: 24px; font-weight: bold;" th:text="${homework.getHomeworkName()}"></span>
                                        <span style="float:right;font-size: 16px; color:red;" th:if="${homework.getHomeworkStatus() == 0}">作业已结束</span><br>
                                        作答时间: <span th:text="${homework.startTime}"></span> ~ <span th:text="${homework.endTime}"></span>
                                    </div>
                                    <div style="float:right;">
                                        <a  class="btn btn-primary" th:if="${homework.getHomeworkStatus() == 1}" th:href="@{'/endHomework/' + ${homework.getHomeworkId()}}" role="button">结束作业</a>
                                        <a  class="btn btn-primary" th:if="${homework.getHomeworkStatus() == 0}" th:href="@{'/startHomework/' + ${homework.getHomeworkId()}}" role="button">重新开始作业</a>
                                        <a onclick="del()" style="float:right; margin-left: 10px;" class="btn btn-primary" th:href="@{'/deleteHomework/' + ${homework.getHomeworkId()}}" role="button">删除</a>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="questionsBank">
                        <a th:href="@{/toAddQuestionBank}" class="btn btn-primary" href="#" role="button" style="margin-left: 18px; margin-top: 15px;">新建作业</a>
                        <div class="col-md-12" style="margin-bottom: 20px;">
                            <div th:each="questionBank:${questionBanks}" style="background-color: #ced9f8; margin-top: 10px; padding: 10px; border-radius: 10px">
                                <a th:href="@{'/intoHomework/' + ${questionBank.getQuestionBankId()}}" style="color: black">
                                    <span style="color: black; font-size: 24px; font-weight: bold;" th:text="${questionBank.getQuestionBankName()}"></span><br>
                                    创建时间: <span  th:text="${questionBank.getQuestionBankTime()}"></span>
                                    <a onclick="return del()" style="margin-left: 860px;" class="btn btn-primary" th:href="@{'/deleteQuestionBank/' + ${questionBank.getQuestionBankId()}}" role="button">删除</a>
                                    <button id="openModel" th:onclick="openReleaseHomeworkModal([[${questionBank.getQuestionBankId()}]])" th:value="${questionBank.getQuestionBankId()}" class="btn btn-primary" data-toggle="modal" data-target="#Modal_releaseHomework" role="button">发布</button>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!--发布作业模态框-->
    <div class="modal fade" id="Modal_releaseHomework">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">发布作业</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form style="text-align: left" th:action="@{/releaseHomework}" method="post">
                        <input type="hidden" th:value="${courseId}" name="courseId">
                        <input type="hidden" id="questionBankId" name="questionBankId">
                        作业名称: <input class="form-control" type="text" name="homeworkName"><br>
                        开始时间: <input class="form-control" type="date" name="startTime"><br>
                        截止时间: <input class="form-control" type="date" name="endTime"><br>
                        <input style="margin-left: 513px;" class="btn-success btn" type="submit" value="完成">
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script>
        let page = 0;
        $(function () {
            $('#myTab li:eq('+page+') a').tab('show');
        });

        let openModel = document.getElementById("openModel");
        let questionBankId = document.getElementById("questionBankId");
        function openReleaseHomeworkModal(Id) {
            questionBankId.value = Id;
        }
    </script>
</body>
</html>